<template>
  <!-- 消息详情 -->
  <div class="messageDetail">
      <!-- 头部 -->
      <head-usual :title="detail.title" :to="to"></head-usual>
      <!-- 详情头部 -->
      <div class="detail-title">
          <p class="title-hd">{{detail.title}}</p>
          <p class="title-ft">
              <span>{{detail.addtime.replace("T"," ")}}</span>
          </p>
      </div>
      <!-- 详情内容 -->
      <div class="detail-main">
          <div class="detail-html" v-html="detail.info"></div>
          <p v-html="detail.murl"></p>
      </div>
  </div>
</template>
<script>
import headUsual from "@/pages/components/headUsual";
import { getDetail } from "@/api/user/message";

export default {
  data() {
    return {
      id: 0,
      to:'/user/message',
      detail: {
        title:"消息详情",
        addtime:""
      }
    };
  },
  created() {
    this.id = parseInt(this.$route.params.id);
    this._GetDetail();
  },
  methods: {
    //获取详情页数据
    _GetDetail() {
      this.$indicator.open();
      getDetail(this.id).then(res => {
        if (res.StatusCode === 200) {
          this.detail = res.Data;
          this.$indicator.close();
        }
      });
    }
  },
  components: { headUsual }
};
</script>

<style lang="scss" scoped>
// 消息详情头部
.detail-title {
  padding: 20px 9px 0 9px;
  .title-hd {
    font-size: 14px;
    color: #282828;
    font-weight: bolder;
  }
  .title-ft {
    color: #cccccc;
    padding-bottom: 11px;
    border-bottom: 1px solid #eeeeee;
  }
}
//详情内容
.detail-main {
  padding: 11px 9px;
  .img-box {
    width: 100%;
    margin-bottom: 14px;
    img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
    }
  }
  .detail-html {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    text-indent: 2em;
  }
}
</style>
